<template>
  <div>
    <h1 :class="$attrs.class">{{ msg }}</h1>
    <button @click="count++">count is: {{ count }}</button>
    <span v-once>{{ count }}</span>
    <p>
      Edit <code>components/HelloWorld.vue</code> to test hot module
      replacement. rawHTML <span v-html="rawHTML"></span>
      <span :[dynamicAttr]="good" @click="changeDynamicAttr">动态属性</span>
    </p>
    <h1 v-for="(item, index) in filterList" :key="index">{{ item.name }}</h1>
    <h2 v-for="(value, name) in objTest" :key="{ name }">{{ value }}</h2>
    <button @click="changeFilterList">
      变更数组方法改变数组也能触发视图更新
    </button>
    <button @click="doOne(), doTwo()">多事件处理</button>
    <input @keyup.enter="testAnJian" />
    <input @keyup.alt.enter="testAnJian2" />
    <button @click.ctrl="testAnJian3">testAnJian3</button>
    <button @click.right="testAnJian4">testAnJian4</button>
    <br />
    <input
      type="checkbox"
      v-model="toggle"
      true-value="yes"
      false-value="no"
      @change="handleChange1"
    />
    <br />
    <input type="radio" v-model="pick" :value="ttt" @change="handleChange2" />
    <select v-model="selected">
      <option :value="{ number: 111 }">默认选中的这个</option>
    </select>
    <input type="text" v-model.number="testnumber" @input="testInput1" />
    <div>组件v-model{{ bindValue }} <custom-input v-model="bindValue" /></div>
    <props-test v-bind="objTest" :author="authorFn" />
    <none-prop-test @change="showChange" test1="11" class="testclass" />
    <emit-test @gogogo="doGogogo" @click="doClick" />
    <div>
      v-model参数test foo: {{ foo }}, modelValue: {{ modelValue }}， firstName:
      {{ firstName }} lastName:{{ lastName
      }}<v-model-test
        v-model.capitalize="modelValue"
        v-model:foo.good="foo"
        v-model:firstName="firstName"
        v-model:lastName="lastName"
      />
    </div>
    <div>
      <slot-test>
        <!-- <slot-test v-slot="defaultSlot"> -->
        <!-- <slot-test v-slot="{ test2 = 'abin' }"> -->
        <!-- testslot {{ defaultSlot }} -->
        <!-- testslot {{ test2 }} -->
        testslot
        <!-- <template v-slot:slot1>我是slot1</template> -->
        <!-- <template v-slot:slot2>我是slot2</template> -->
        <template #slot1>我是slot1</template>
        <template #slot2>我是slot2</template>
        <!-- <template v-slot:[slotName]>我在哪里</template> -->
        <!-- <template v-slot:slot3="slot3Prop">我是slot3,{{ slot3Prop }}</template> -->
        <template #slot3="slot3Prop">我是slot3,{{ slot3Prop }}</template>
      </slot-test>
      <button @click="changeSlot">切换slot</button>
    </div>
    <div>provide-inject的test， <provide-inject /></div>
    <div>keep-alive的test<keepalive-test /></div>

    <div>
      异步组件的test
      <async-component />
      <Suspense>
        <template #default>
          <async-component2 />
        </template>
        <template #fallback>
          <div>laoding.....</div>
        </template>
      </Suspense>
    </div>
    <div>
      ref的test <button @click="$refs.testref.focusInput()">聚焦</button>
      <ref-test ref="testref" />
    </div>
  </div>
</template>

<script>
import { defineAsyncComponent } from "vue";
import { Person } from "./components/type";
import CustomInput from "./components/CustomInput.vue";
import PropsTest from "./components/PropsTest.vue";
import NonePropTest from "./components/nonePropTest.vue";
import EmitTest from "./components/emitTest.vue";
import VModelTest from "./components/vModelTest.vue";
import SlotTest from "./components/slotTest.vue";
import ProvideInject from "./components/ProvideInject.vue";
import KeepaliveTest from "./components/keepaliveTest.vue";
import AsyncComponent2 from "./components/AsyncComponent2.vue";
import RefTest from "./components/RefTest.vue";

// const obj = Object.freeze({
//   count: 0,
// });
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  components: {
    CustomInput,
    PropsTest,
    NonePropTest,
    EmitTest,
    VModelTest,
    SlotTest,
    ProvideInject,
    KeepaliveTest,
    AsyncComponent: defineAsyncComponent(() =>
      import("./components/AsyncComponent.vue")
    ),
    AsyncComponent2: defineAsyncComponent(
      () =>
        new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(AsyncComponent2);
            // reject("111");
          }, 2000);
        })
    ),
    RefTest,
  },
  data() {
    return {
      count: 0,
      rawHTML: "<h1 style='color: red'>raw</h1>",
      dynamicAttr: "attr",
      good: "11",
      list: [
        {
          flag: 1,
          name: "11",
        },
        {
          flag: 0,
          name: "22",
        },
        {
          flag: 1,
          name: "33",
        },
        {
          flag: 1,
          name: "44",
        },
      ],
      objTest: {
        value1: "va1",
        value2: "val2",
        value3: "value3",
      },
      toggle: "",
      pick: "",
      ttt: "111",
      selected: { number: 111 },
      testnumber: 0,
      bindValue: 21212,
      authorFn: new Person("liu", "bin"),
      foo: 0,
      firstName: "firstName",
      lastName: "lastName",
      modelValue: "modelValue",
      slotName: "slot1",
    };
  },
  computed: {
    filterList() {
      return this.list.filter((item) => item.flag === 1);
    },
  },
  errorCaptured(e) {
    console.log("e", e);
  },
  created() {
    this.$watch("count", (newVal, oldVal) => {
      console.log("count改了。。", newVal);
    });
    console.log('$attrs', this.$attrs)
  },
  methods: {
    changeDynamicAttr() {
      this.dynamicAttr = this.dynamicAttr + 1;
    },
    changeFilterList() {
      this.list.push({
        flag: 1,
        name: Date.now(),
      });
      // this.list = this.list.concat({ flag: 1, name: "abin" });
    },
    doOne() {
      alert("one");
    },
    doTwo() {
      alert("two");
    },
    testAnJian() {
      alert("anjian");
    },
    testAnJian2() {
      alert("anjian2");
    },
    testAnJian3() {
      alert("anjian3");
    },
    testAnJian4() {
      alert("anjian4");
    },
    handleChange1() {
      console.log(this.toggle);
    },
    handleChange2() {
      console.log(this.pick);
    },
    testInput1() {
      console.log(this.testnumber, typeof this.testnumber);
    },
    showChange(value) {
      console.log("select变了", value);
    },
    doGogogo(data1, data2) {
      console.log("data1,data2", data1, data2);
    },
    doClick() {
      console.log("组件定义的click事件也执行了");
    },
    changeSlot() {
      if (this.slotName === "slot1") {
        this.slotName = "slot2";
      } else {
        this.slotName = "slot1";
      }
    },
  },
};
</script>
<style  scoped>
</style>
